<template>
  <div class="menu-manage">
    <div class="leftbox">
      <div class="tiobox totop">
        <div><el-button type="primary" size="small" @click="dialogVisible=true">新 增</el-button></div>
        <div class="table">
          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
             border
             v-loading="loading"
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            height="calc(100% - 1px)"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column property="menuName" label="菜单名称" />
            <el-table-column property="menuType" label="菜单类型" width="200"/>
            <el-table-column property="menuExplain" label="菜单描述" />
            <el-table-column property="defaultMenu" label="是否默认" align="center">
              <template #default="{row}">
                <div>{{ row.defaultMenu?'是':'否' }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="{row}">
                <el-link type="primary" @click="toput(row)" :underline="false" style="margin-right: 10px;">编辑</el-link>
                <el-link type="primary" :underline="false" @click="confirm(row)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-dialog :title="formdata.menuId?'菜单编辑':'菜单新增'" @close="quxiao" :visible.sync="dialogVisible" width="30%" >
              <div>
                <el-form ref="form" :rules="rules" :model="formdata" label-width="80px" label-position="left">
                    <el-row :gutter="20">
                        <el-col :span="24">
                          <el-form-item label="菜单名称" prop="menuName">
                            <el-input size="small" v-model="formdata.menuName" placeholder="请输入菜单名称"></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                          <el-form-item label="菜单描述" >
                            <el-input type="textarea" v-model="formdata.menuExplain" placeholder="请输入菜单描述"></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                          <el-form-item label="是否默认" >
                            <el-switch v-model="formdata.defaultMenu"></el-switch>
                          </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
              </div>
              <div slot="footer">
                  <el-button type="primary" @click="sure" size="small">确 定</el-button>
                  <el-button @click="quxiao" size="small">取 消</el-button>
              </div>
          </el-dialog>
        </div>
      </div>
      <div class="tiobox" ref="Authorization">
       <Authorization 
       ref="Authorizationrefs"
       :tablerow="tablerow"
       ></Authorization>
      </div>
    </div>
    <div class="rightbox">
      <MenuInfo ref="MenuInforefs" :tablerow="tablerow"></MenuInfo>
      
    </div>
  </div>
</template>
<script>

import MenuInfo from './MenuInfo'
import Authorization from './Authorization.vue'
import {getMenuListapi,getMenuItemListapi,getMenuGrantListapi,postAddMenuListapi,deleteMenuListapi,putMenuListapi} from '@/api/system/menu-manage'
export default {
  name: 'CallPoliceIndex',
  components:{
    Authorization,
    MenuInfo,
  },
  data() {
    return {
      checked: '',
      formdata:{defaultMenu:false,menuExplain:'',menuName:''},
      tableData: [],
      menulist: [],
      loading:false,
      dialogVisible: false,
      rules: {
        menuName:[{ required: true, message: '请输入菜单树名称', trigger: 'blur' }]
      },
      tablerow:{}
    };
  },

  async mounted() {
    await this.getlist()
    this.$refs.singleTable.setCurrentRow(this.tableData[0]);
  },

  methods: {
    async sure() {
      await this.$refs.form.validate()
       const {defaultMenu,menuExplain,menuName,menuId}=this.formdata
        this.formdata.menuId ? putMenuListapi({ defaultMenu, menuExplain, menuName, menuId }).then(res => {
          this.$message({
            type: res.code == '200' ? 'success' : 'waraing',
            message:res.code=='200'?'修改成功':res.message
          })
          this.getlist()
          this.quxiao()
        })
        : postAddMenuListapi({...this.formdata,menuId:''}).then(res => {
          this.$message({
            type: res.code == '200' ? 'success' : 'waraing',
            message:res.code=='200'?'新增成功':res.message
          })
          this.getlist()
          this.quxiao()
        })
    },
    // 删除
    async confirm(val) {
      this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          deleteMenuListapi(val.menuId).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'waraing',
              message:res.code=='200'?'删除成功':res.message
            })
            this.getlist()
            this.$refs.singleTable.setCurrentRow(this.tableData[0])
          }) 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    toput(val) {
      this.dialogVisible = true
      this.formdata={...val}
    },
    //获取菜单树
    async getlist() {
      this.loading=true
      const { data: { list } } = await getMenuListapi()
      this.tableData = list
      this.loading=false
    },
    //菜单/列表点击
    async handleCurrentChange(val) {
      if (!val) return
      this.tablerow=val
      this.$refs.Authorizationrefs.getautlist(val)
      this.$refs.MenuInforefs.getmenulist(val)
      this.$refs.MenuInforefs.treevalue=this.fanth={}
    },
    quxiao() {
      this.$refs.form.resetFields()
      this.formdata={defaultMenu:false,menuExplain:'',menuName:''}
      this.dialogVisible=false
    }
  },
};
</script>
<style scoped lang="scss">
.menu-manage{
  height: 100%;
  display: flex;
  padding: 10px;
  .leftbox{
    width: 60%;
    height: 100%;
    .tiobox{
      height: calc(50% - 5px);
      background-color: #fff;
      padding: 20px;
      border-radius: 3px;
      .table{
        margin-top: 10px;
        height: calc(100% - 42px);
      }
    }
    .totop{
      margin-bottom: 10px;
    }
  }
  .rightbox{
    width: calc(40% - 10px);
    margin-left: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 3px;
  }
}
::v-deep(.el-table--striped .el-table__body tr.el-table__row--striped.current-row td),
::v-deep(.el-table__body tr.current-row > td) {
  background-color: #a0cfff;
}
</style>